import React, { memo, useState } from 'react';
import { Drawer, Collapse, InputNumber, Popover } from 'antd';
import styles from './index.less';

import WAndH from './WAndH';
import Padding from './Padding';
import Border from './Border';
import { connect } from 'react-redux';
import EventsPanel from './EventsPanel';
import StringProp from './StringProp';
import Draggable from 'react-draggable';
import { useDrag } from 'react-dnd';
import { findNodeById } from '@/utils';
const { Panel } = Collapse;
function index({ project }: any) {
  const { currentCompId, pageConfig } = project;
  const currentComponent = findNodeById(pageConfig, currentCompId);
  const children = currentComponent?.children;
  console.log('children   -----> ', children);
  const handleStringPropChange = (e) => {
    console.log('字符串变动 -> ', e);
    //
  };

  return (
    <Draggable
      handle=".handle"
      defaultPosition={{ x: 0, y: 0 }}
      grid={[5, 5]}
      scale={1}
      bounds={{
        left: - window.innerWidth + 620,
        right: 10,
        top: -10,
        bottom: 100

      }}
    >
      <div className={styles.propsBar} onClick={(e) => e.stopPropagation()}>
        {/* 拖拽手柄 */}
        <div className={'handle' + ' ' + styles.dragHandle}>容器</div>

        <Collapse defaultActiveKey={['1', '2', '3']}>
          <Panel header="宽高" key="1">
            <WAndH />
          </Panel>
          <Panel header="边距" key="2">
            <Padding />
          </Panel>
          <Panel header="边框" key="3">
            <Border />
          </Panel>
          <Panel header="事件" key="4">
            <EventsPanel />
          </Panel>
          <Panel header="属性" key="5">
            <StringProp
              name="内容"
              onChange={handleStringPropChange}
              propName="children"
              value={children}
            />
          </Panel>
        </Collapse>
      </div>
    </Draggable>
  );
}

export default connect(({ project }: any) => ({ project }), {
  save: (payload: any) => ({ type: 'project/save', payload }),
})(memo(index));
